import React from "react";
import styles from "./page.module.css";
import Link from "next/link";
import Image from "next/image";

// 获取博客文章数据
// 修改 fetchPosts 函数中的 URL
const fetchPosts = async () => {
    try {
        // 拼接完整 URL（开发环境用 localhost:3000，生产环境替换为实际域名）
        const baseUrl = process.env.NODE_ENV === 'development'
            ? 'http://localhost:3000'
            : 'https://你的生产环境域名';

        const res = await fetch(`${baseUrl}/api/posts/all`, {  // 关键：使用完整 URL
            method: "GET",
            headers: { "Content-Type": "application/json" },
            cache: "no-store",
        });

        if (!res.ok) {
            throw new Error(`API 请求失败: ${res.status}`);
        }

        return await res.json();
    } catch (err) {
        console.error("获取博客文章失败:", err);
        throw err;
    }
};

const Post = async () => {
    // 调用获取数据的函数（类似你的异步处理逻辑）
    const posts = await fetchPosts();
    posts.map((post) => {
        console.debug("此时的post id是: ",
            post._id
        )
    })
    return (
        <div className={styles.mainContainer}>
            <h1 className={styles.pageTitle}>博客文章列表</h1>

            {posts.length === 0 ? (
                <p className={styles.emptyMessage}>暂无博客文章</p>
            ) : (
                posts.map((post) => (
                    <Link
                        href={`/blog/${post._id}`}  // 使用 _id 作为路由参数（与你的数据结构匹配）
                        className={styles.container}
                        key={post._id}  // 使用 _id 作为唯一键
                    >
                        <div className={styles.imageContainer}>
                            <Image
                                src={post.img || "/contact.png"}  // 处理图片不存在的情况
                                alt={post.title}  // 补充 alt 文本，优化可访问性
                                width={400}
                                height={250}
                                className={styles.image}
                            />
                        </div>
                        <div className={styles.content}>
                            <h2 className={styles.title}>{post.title}</h2>
                            <p className={styles.desc}>{post.desc}</p>
                        </div>
                    </Link>
                ))
            )}
        </div>
    );
};

export default Post;